<template>
	<div>
		<div class="banner" @click="handleBannerClick">
			<img class="banner-img" :src="bannerImg" >
			<div class="banner-info">
				<div class="banner-tittle">{{this.sightName}}</div>
				<div class="banner-number">
					<span class="iconfont banner-icon">&#xeb6d;</span>
					{{this.bannerImgs.length}}
				</div>
			</div>
		</div>
		<common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
	</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
	name: 'DetailBanner',
	props:{
		sightName: String,
		bannerImg: String,
		bannerImgs: Array
	},
	data () {
		return {
			showGallary: false,
			imgs: ['http://img1.qunarzz.com/sight/p0/1810/36/36d7ef6ba5281744a3.water.jpg_r_800x800_317f9133.jpg','http://img1.qunarzz.com/sight/p0/1810/83/838ce3656e7e6f4ca3.water.jpg_r_800x800_e8a83f2d.jpg']
		}
		
	},
	methods: {
		handleBannerClick () {
			this.showGallary = true
		},
		handleGallaryClose () {
			this.showGallary = false
		}
	}
	,
	components: {
		CommonGallary
	}
	
}
</script>

<style scoped>
	.banner{
		position: relative;
		overflow: hidden;
		height: 0;
		padding-bottom: 55%;
	}
	.banner-img{
		width: 100%;
	}
	.banner-info{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		line-height: .6rem;
		display: flex;
		color: #fff;
	}
	.banner-tittle{
		flex: 1;
		font-size: .32rem;
		color: #fff;
		z-index: 1;
		padding-left: .4rem;
	}
	.banner-number{
		padding: 0 .4rem;
		height: .32rem;
		line-height: .32rem;
		border-raddus: .2rem;
		background: rgba(0, 0, 0, .8);
		font-size: .24rem;
		margin-top: .14rem;
		
	}
	.banner-icon{
		font-size: .24rem;
	}
</style>